<template>
  <div class="types bg-white">
    <div
      class="item"
      v-for="(item, index) in types"
      :key="`typeItem${index}`"
      @tap="trans(item)"
    >
      <img :src="item.pic || defaultIcon" alt="" class="img" mode="aspectFit" />
      <span class="text">{{ item.marketingName }}</span>
    </div>
    <div class="item" @tap="goLease">
      <img
        src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/type-assess.png"
        alt=""
        class="img"
        mode="aspectFit"
      />
      <span class="text">企业租赁</span>
    </div>
    <div class="item" @tap="goClassify">
      <img
        src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/type-more.png"
        alt=""
        class="img"
      />
      <span class="text">更多</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Types",
  data() {
    return {
      defaultIcon:
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/tab-default-icon.png",
      types: Array.from({ length: 8 }).fill({ image: "", name: "" }),
    };
  },
  mounted() {
    this.getTypes();
  },
  methods: {
    getTypes() {
      // this.$http.request({
      //   url: '/index/firstClassification.json',
      //   data: {
      //     type: 2
      //   }
      // }, false).then(({ data: { fcList } }) => {
      //   this.types = fcList.slice(0, 3)
      // })
      this.$api.getMarketingList({ position: 1 }).then((data) => {
        this.types = data.slice(0, 8);
      });
    },
    goClassify({ id }) {
      this.$goPage(`/pages/classify/index`);
    },
    trans({ url }) {
      this.$goWebview(url);
      // if (id === 141) {
      //   return this.$goPage('/pagesIndex/companyLease/index')
      // }
      // this.$goPage(`/pagesIndex/classifyInfo/index?id=${id}`)
    },
    goLease() {
      this.$goPage("/pagesIndex/companyLease/index");
    },
  },
};
</script>
<style lang="scss">
.types {
  display: flex;
  border-radius: 7px;
  width: 100%;
  height: 181px;
  padding: 0 13px;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  // overflow: auto;
  .item {
    flex: 1;
    min-width: calc((100% - 26px) / 5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 46px;
      height: 46px;
    }
    .text {
      color: #555555;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
</style>
